<template>
  <div class="nav-container flex flex-column">
  <div style="position:relative;">
   <div class="title">AI智能数据院长决策系统</div>
  <div class=" flex align-center" style="position: absolute;right: 40px;top: 40px;">
    <screenfull id="screenfull" class="right-menu-item hover-effect" style="width: 40px;height: 40px;"/>
  </div>
  </div>
    <div style="width: 1600px;margin: 0 auto;padding: 20px;">
      <div class="nav-box flex align-center justify-content-space-between">
        <div class="module hover-animation" @click="jump('/Dashboard')" style="background-color: #395AEC">
          <div>
            <img alt="" class="icon" src="@/static/医疗质量.png">
            <div class="sub-title">医疗质量与安全维度</div>
          </div>
        </div>
        <div class="module hover-animation" @click="jump('/businessCore')"  style="background-color: #E08945">
          <div>
            <img alt="" class="icon" src="@/static/DRG财务.png">
            <div class="sub-title">DRG与财务分析维度</div>
          </div>
        </div>
        <div class="module hover-animation" @click="jump('/performanceEngine')"  style="background-color: #6235C1">
          <div>
            <img alt="" class="icon" src="@/static/运营效率.png">
            <div class="sub-title">运营效率监控维度</div>
          </div>
        </div>
        <div class="module hover-animation" @click="jump('/Potential')"  style="background-color: #6BAF51">
          <div>
            <img alt="" class="icon" src="@/static/人才发展.png">
            <div class="sub-title">人才持续发展和满意度</div>
          </div>
        </div>
        <div class="module hover-animation" @click="jump('/PartyBuilding')"  style="background-color: #CD5B51">
          <div>
            <img alt="" class="icon" src="@/static/党建大屏.png">
            <div class="sub-title">医院党建智慧大屏</div>
          </div>
        </div>
      </div>
      <div class="feature-container">
        <div class="flex align-center">
          <img alt="" src="@/static/圆LOGO.png" style="width: 50px;height: 50px; ">
          <div style="font-size: 24px;font-weight: bolder;margin-left: 20px;">人云联拓·医疗智能体提供数据算法</div>
        </div>
        <div class="feature-wrapper">
          <div class="feature-item">
            <div class="icon-box">
              <img alt="全方位多角度检测" class="sub-icon" src="@/static/全方位.png">
            </div>
            <div class="content">
              <div class="third-title">全方位多角度检测</div>
              <div class="desc">根据您当前关注的管理维度选择相应系统。医疗质量、财务分析、运营效率为医院核心运营指标，建议优先关注。</div>
            </div>
          </div>
          <div class="feature-item">
            <div class="icon-box">
              <img alt="数据更新频率"  class="sub-icon" src="@/static/数据更新.png">
            </div>
            <div class="content">
              <div class="third-title">数据更新频率</div>
              <div class="desc">各系统数据每日凌晨自动更新，确保您查看的是最新的医院运营数据，支持导出历史数据进行趋势分析。</div>
            </div>
          </div>
          <div class="feature-item">
            <div class="icon-box">
              <img alt="人工智能决策"  class="sub-icon" src="@/static/人工智能.png">
            </div>
            <div class="content">
              <div class="third-title">人工智能决策</div>
              <div class="desc">系统内置AI分析引擎，可自动识别运营异常指标并提供决策建议，辅助医院管理层制定科学决策方案。</div>
            </div>
          </div>
          <div class="feature-item">
            <div class="icon-box">
              <img alt="报告导出功能"  class="sub-icon" src="@/static/报告导出.png">
            </div>
            <div class="content">
              <div class="third-title">报告导出功能</div>
              <div class="desc">各系统均支持导出PDF、Excel格式报告，可自定义报告周期和指标范围，方便院务会议使用。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import Screenfull from '@/components/Screenfull'
const router = useRouter()
const jump = (path) => {
  if (path) {
    router.push(path)
  }else {
      alert('功能开发中，敬请期待！')
  }
}
</script>
<style lang="less" scoped>
.nav-container {
  background-color: #f0f2f3 !important;
  height: 100%;
  width: 100%;
  color: #0F3338;
  .title {
    font-size: 60px;
    font-weight: bolder;
    color: white;
    background-color: #709E9F;
    padding: 0 80px;
    height: 240px;
    line-height: 240px;
    text-align: center;
  }
  .nav-box {
    margin: 40px 0 0 0;
    .module {
      cursor: pointer;
      border-radius: 5px;
      width: 280px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      &.hover-animation {
        &:hover {
          transform: scale(1.1);  // 缓慢放大1.1倍
          transition: transform 1s ease;  // 1秒内完成变换
        }
      }


      .icon {
        margin: 0 auto;
        display: block;
        width: 40px;
      }
      .sub-title {
        text-align: center;
        color: white;
        margin-top: 15px;
        font-size: 20px;
        letter-spacing: 1px;
      }
    }
  }
  .feature-container {
    margin: 60px 0 0 0;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    .feature-wrapper {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      background-color: white;
      border-radius: 10px;
      .feature-item {
        flex: 1 1 calc(50% - 10px);
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-radius: 8px;
        .icon-box {
          width: 60px;
          height: 60px;
          margin-right: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          .sub-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
        }
        .content {
          flex: 1;
          .third-title {
            font-weight: bold;
            color: #44464C;
            margin-bottom: 8px;
            font-size: 19px;
            letter-spacing: 1px;
          }

          .desc {
            font-size: 14px;
            color: #797E89;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>
